<template>
  <div class="express-management">
    <div class="content-container">
      <!-- 侧边栏 - 快递公司列表 -->
      <el-aside class="sidebar">
        <div class="company-list">
          <div
            v-for="company in filteredCompanies"
            :key="company.companyId"
            class="company-item"
            :class="{ 'selected-company': selectedCompany && selectedCompany.companyId === company.companyId }"
            @click="handleCompanyClick(company)"
          >
            <div class="company-card">
              <div class="company-card-header">
                <div class="company-info">
                  <div class="company-icon">
                    <i class="el-icon-building"></i>
                  </div>
                  <div>
                    <h4 class="company-name">{{ company.companyName }}</h4>
                    <span class="company-code">{{ company.companyCode }}</span>
                  </div>
                </div>
                <div class="company-status-badge" :class="company.status">
                  {{ getStatusText(company.status) }}
                </div>
              </div>
              <div class="company-card-content">
                <div class="company-details">
                  <div class="company-courier-count">
                    <i class="el-icon-user"></i> {{ company.courierNumber }} 名快递员
                  </div>
                  <div class="company-created">
                    <i class="el-icon-date"></i> 创建于 {{ formatDate(company.createdAt) }}
                  </div>
                </div>
                <div class="company-actions">
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-edit"
                    @click.stop="openCompanyForm('edit', company)"
                    class="action-btn"
                  >
                    <span class="btn-text">编辑</span>
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-delete"
                    @click.stop="deleteCompany(company)"
                    class="action-btn"
                  >
                    <span class="btn-text">删除</span>
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="filteredCompanies.length === 0" class="empty-state">
            <div class="empty-icon">
              <i class="el-icon-inbox"></i>
            </div>
            <p class="empty-text">暂无快递公司数据</p>
            <el-button
              type="primary"
              size="small"
              @click="openCompanyForm('add')"
              class="empty-button"
            >
              新增公司
            </el-button>
          </div>
        </div>
      </el-aside>

      <!-- 主内容区域 - 快递员列表 -->
      <el-main class="main-content">
        <!-- 公司详情 -->
        <div v-if="selectedCompany" class="company-detail">
          <!-- 公司头部信息 -->
          <div class="detail-header">
            <div class="detail-info">
              <div class="detail-icon">
                <img
                  :src="getAvatar(selectedCompany.companyName)"
                  alt="公司头像"
                  class="avatar-image"
                >
              </div>
              <div>
                <h2 class="detail-title">
                  {{ selectedCompany.companyName }}
                </h2>
                <div class="detail-subtitle">
                  <span class="detail-code">({{ selectedCompany.companyCode }})</span>
                  <span class="detail-status-badge" :class="selectedCompany.status">
                    {{ getStatusText(selectedCompany.status) }}
                  </span>
                </div>
              </div>
            </div>
            <div class="detail-actions">
              <el-button
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="openCompanyForm('edit', selectedCompany)"
                class="detail-action-btn"
              >
                编辑公司
              </el-button>
              <el-button
                type="text"
                size="small"
                icon="el-icon-refresh"
                @click="refreshData"
                class="detail-action-btn"
              >
                刷新数据
              </el-button>
            </div>
          </div>

          <!-- 公司统计信息 -->
          <div class="detail-stats">
            <div class="stat-item">
              <div class="stat-value">{{ courierNumber }}</div>
              <div class="stat-label">快递员</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ deliveryNumber }}</div>
              <div class="stat-label">总派送</div>
            </div>
            <div class="stat-item" @click="companyFormVisible = true">
              <div class="stat-value">{{ messageNumber }}</div>
              <div class="stat-label">消息</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">4.8</div>
              <div class="stat-label">用户评分</div>
            </div>
          </div>

          <!-- 公司详情信息 -->
          <div class="detail-info-container">
            <div class="detail-info-header">
              <h3 class="info-header-title">公司详情</h3>
            </div>
            <div class="detail-info-grid">
              <div class="info-row">
                <div class="info-label">注册号码</div>
                <div class="info-value">{{ selectedCompany.registrationNumber }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">联系电话</div>
                <div class="info-value">{{ selectedCompany.contactPhone }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">联系邮箱</div>
                <div class="info-value">{{ selectedCompany.contactEmail }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">公司地址</div>
                <div class="info-value">{{ selectedCompany.address }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">执照到期</div>
                <div class="info-value">{{ selectedCompany.licenseExpiryDate || '未设置' }}</div>
              </div>
              <div class="info-row">
                <div class="info-label">创建时间</div>
                <div class="info-value">{{ formatDate(selectedCompany.createdAt) }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 快递员列表 -->
        <div class="courier-section">
          <div class="section-header">
            <h3 class="section-title">
              <i class="el-icon-user"></i> 快递员列表
              <span v-if="selectedCompany" class="courier-count">
                (共 {{ getCourierCount(selectedCompany.companyId) }} 人)
              </span>
            </h3>
            <div class="section-actions">
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="openCourierForm('add')"
                :disabled="!selectedCompany"
                class="action-button"
              >
                新增快递员
              </el-button>
            </div>
          </div>

          <!-- 快递员查询与数据列表容器 -->
          <div class="courier-search-list-container flex flex-col lg:flex-row gap-4">
            <!-- 快递员查询表单 - 左侧 -->
            <div class="courier-search-form w-full lg:w-1/3">
              <el-form
                :model="courierSearchForm"
                label-width="80px"
                class="search-form h-full"
              >
                <el-row :gutter="20" class="h-full flex flex-col">
                  <el-col :span="24">
                    <el-form-item label="性别">
                      <el-select v-model="courierSearchForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                        <el-option label="不限" value=""></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20">
                    <el-form-item label="联系电话">
                      <el-input v-model="courierSearchForm.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="状态">
                      <el-select v-model="courierSearchForm.status" placeholder="请选择状态">
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="在职" value="active"></el-option>
                        <el-option label="休假" value="on_leave"></el-option>
                        <el-option label="离职" value="inactive"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="flex items-end">
                    <el-form-item>
                      <el-button type="primary" @click="searchCouriers">查询</el-button>
                      <el-button @click="resetCourierSearch">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <!-- 快递员表格 - 右侧 -->
            <div class="courier-table-container flex-1">
              <div v-if="isLoading" class="loading-container flex justify-center items-center h-full">
              </div>
              <el-table v-else
                        :data="filteredCouriers"
                        border
                        stripe
                        fit
                        highlight-current-row
                        empty-text="请选择一个公司查看其快递员列表"
                        class="courier-table h-full"
              >
                <el-table-column prop="name" label="姓名" width="120" align="center" class="name-column">
                  <template slot-scope="scope">
                    <div class="courier-info">
                      <div class="courier-avatar">
                        <img
                          :src="getAvatar(scope.row.name)"
                          alt="快递员头像"
                          class="avatar-image"
                        >
                      </div>
                      <div class="courier-name">{{ scope.row.name }}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="sex" align="center" label="性别" width="80">
                  <template slot-scope="scope">
                    <div class="sex-tag" :class="scope.row.sex === 1 ? 'male' : 'female'">
                      {{ scope.row.sex === 1 ? '男' : '女' }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="phoneNumber" align="center" label="联系电话" width="130"></el-table-column>
                <el-table-column prop="employeeId" align="center" label="员工编号" width="120"></el-table-column>
                <el-table-column prop="hireDate" align="center" label="入职日期" width="120"></el-table-column>
                <el-table-column label="状态" align="center" width="100">
                  <template slot-scope="scope">
                    <div class="status-badge" :class="scope.row.status">
                      {{ getCourierStatusText(scope.row.status) }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="派送单数" align="center" width="100">
                  <template slot-scope="scope">
                    <div class="delivery-count">
                      {{ scope.row.deliveryQuantity }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120" align="center">
                  <template slot-scope="scope">
                    <div class="action-buttons">
                      <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-edit"
                        @click="openCourierForm('edit', scope.row)"
                        class="edit-btn"
                      >
                        <span class="btn-text">编辑</span>
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-delete"
                        @click="deleteCourier(scope.row)"
                        class="delete-btn"
                      >
                        <span class="btn-text">删除</span>
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="additional-pagination-container mt-5">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.pageNum"
              :page-sizes="[3, 6, 9, 18]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-main>
    </div>
    <el-dialog

      :visible.sync="companyFormVisible"
      class="my-centered-dialog"
      width="70%"
      :close-on-click-modal="false"
    >
      <message-management/>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="companyFormVisible = false">取消</el-button>
        <el-button type="primary" @click="companyFormVisible = false">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getCourierCompanyList, getCourierList, getCourierNumber } from '../../../api/list/courier'
import MessageManagement from './MessageManagement.vue'

export default {
  components: { MessageManagement },
  data() {
    return {
      // 快递员查询表单数据
      courierSearchForm: {
        sex: '',
        phone: '',
        status: 'all'
      },
      query: {
        pageSize: 3,
        pageNum: 1
      },
      total: 0,
      // 模拟快递公司数据
      companies: [],
      // 模拟快递员数据
      couriers: [],
      // 快递员数量
      courierNumber: null,
      //公司总派送
      deliveryNumber: null,
      //消息
      messageNumber: null,
      // 搜索和过滤相关
      companySearch: '',
      courierFilter: 'all',

      // 当前选中的公司
      selectedCompany: null,

      // 表单对话框相关
      companyFormVisible: false,
      courierFormVisible: false,
      formType: 'add',
      formData: {},

      // 动画和过渡相关
      isLoading: false
    }
  },

  computed: {
    // 过滤后的快递员列表（包含性别查询）
    filteredCouriers() {
      if (!this.selectedCompany) return []

      let couriers = this.getCouriersByCompanyId(this.selectedCompany.companyId)

      // 应用性别查询过滤
      if (this.courierSearchForm.sex !== '') {
        couriers = couriers.filter(courier => String(courier.sex) === this.courierSearchForm.sex)
      }

      // 应用其他查询过滤
      if (this.courierSearchForm.phone) {
        couriers = couriers.filter(courier =>
          courier.phoneNumber && courier.phoneNumber.includes(this.courierSearchForm.phone)
        )
      }

      if (this.courierSearchForm.status && this.courierSearchForm.status !== 'all') {
        couriers = couriers.filter(courier => courier.status === this.courierSearchForm.status)
      }

      return couriers
    },

    // 过滤后的公司列表
    filteredCompanies() {
      if (!this.companySearch) {
        return this.companies
      }

      const search = this.companySearch.toLowerCase()
      return this.companies.filter(company =>
        company.companyName.toLowerCase().includes(search) ||
        company.companyCode.toLowerCase().includes(search) ||
        company.registrationNumber.toLowerCase().includes(search)
      )
    }

  },
  methods: {
    // 修改方法使其返回Promise
    courierCompanyList() {
      return getCourierCompanyList()
        .then((response) => {
          this.companies = response.data
          if (this.companies.length > 0) {
            this.selectedCompany = this.companies[0]
          }
          return response
        })
        .catch((error) => {
          this.$message.error('获取快递公司信息失败')
          throw error
        })
    },

    courierList(selectedCompany) {
      this.isLoading = true
      getCourierList(this.query, selectedCompany.companyId)
        .then((response) => {
          this.couriers = response.rows
          this.total = response.total
        })
        .catch((error) => {
          this.$message.error('获取快递员信息失败')
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    courierNumbers(selectedCompany) {
      getCourierNumber(selectedCompany.companyId)
        .then((response) => {
          this.messageNumber = response.data.messageNumber
          this.courierNumber = response.data.courierNumber
          this.deliveryNumber = response.data.deliveryNumber
        })
        .catch((error) => {
          this.$message.error('获取数据错误')
        })
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      if (this.selectedCompany) {
        this.courierList(this.selectedCompany)
      }
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      if (this.selectedCompany) {
        this.courierList(this.selectedCompany)
      }
    },
    searchCouriers() {
      // 模拟搜索加载效果
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 300)
    },

    // 重置快递员搜索
    resetCourierSearch() {
      this.courierSearchForm = {
        sex: '',
        phone: '',
        status: 'all'
      }
    },
    // 处理公司点击事件
    handleCompanyClick(company) {
      // 添加点击反馈
      this.isLoading = true
      // 模拟数据加载延迟
      setTimeout(() => {
        this.selectedCompany = company
        this.isLoading = false
      }, 300)
      this.courierList(company)
      this.courierNumbers(company)
    },

    // 获取公司的快递员数量
    getCourierCount(companyId) {
      return this.couriers.filter(courier => courier.companyId === companyId).length
    },

    // 根据公司ID获取快递员列表
    getCouriersByCompanyId(companyId) {
      if (!companyId) return []
      return this.couriers.filter(courier => courier.companyId === companyId)
    },

    // 获取公司状态文本
    getStatusText(status) {
      switch (status) {
        case 'active':
          return '活跃'
        case 'inactive':
          return '不活跃'
        case 'suspended':
          return '暂停'
        default:
          return status
      }
    },

    // 获取快递员状态文本
    getCourierStatusText(status) {
      switch (status) {
        case 'active':
          return '在职'
        case 'inactive':
          return '离职'
        case 'on_leave':
          return '休假'
        default:
          return status
      }
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
    },

    // 获取快递员头像
    getAvatar(name) {
      // 简单实现，根据姓名生成头像
      const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
      const index = name.charCodeAt(0) % colors.length
      const initials = name.substring(0, 2)
      return `https://picsum.photos/seed/${name}/200/200`
    },
    // 打开公司表单
    openCompanyForm(type, company = null) {
      this.formType = type
      this.formData = company ? { ...company } : {}
      this.companyFormVisible = true
    },

    // 打开快递员表单
    openCourierForm(type, courier = null) {
      this.formType = type
      this.formData = courier ? { ...courier } : { companyId: this.selectedCompany ? this.selectedCompany.companyId : null }
      this.courierFormVisible = true
    },

    // 删除公司（仅模拟）
    deleteCompany(company) {
      // 模拟删除效果
      this.$confirm(`确定要删除 ${company.companyName} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除操作已执行（模拟）'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 删除快递员（仅模拟）
    deleteCourier(courier) {
      // 模拟删除效果
      this.$confirm(`确定要删除 ${courier.name} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除操作已执行（模拟）'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 刷新数据（仅模拟）
    refreshData() {
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
        this.$message({
          type: 'success',
          message: '数据已刷新（模拟）'
        })
      }, 800)
    }
  },

  created() {
    this.courierCompanyList()
      .then(() => {
        if (this.companies.length > 0) {
          this.selectedCompany = this.companies[0]
          this.courierList(this.selectedCompany)
          this.courierNumbers(this.selectedCompany)
        }
      })
      .catch(error => {
        console.error('初始化数据加载失败', error)
      })
  }
}
</script>

<style scoped>
/* 全局样式 */
.express-management {
  height: 820px;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.header {
  background-color: #1890ff;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-title {
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
}

.header-right .el-dropdown-link {
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.header-right .el-dropdown-link i {
  margin-right: 5px;
}

/* 内容容器 - 关键布局调整 */
.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏样式 - 占四分之一宽度 */
.sidebar {
  flex-basis: 25%;
  max-width: 25%;
  background-color: #f5f7fa;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
  transition: all 0.3s;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 5;
}

.sidebar-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}

.search-input {
  transition: all 0.3s;
}

.search-input:focus-within {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.action-button {
  transition: all 0.3s;
}

.action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.company-list {
  padding: 15px;
}

/* 公司项容器样式 - 增强视觉区分度 */
.company-item {
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  /* 添加轻微阴影增强层次感 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 背景色区分不同公司 */
.company-item:nth-child(odd) {
  background-color: #ffffff;
}

.company-item:nth-child(even) {
  background-color: #f9fafc;
}

.company-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(24, 144, 255, 0.05);
  transition: width 0.3s;
}

.company-item:hover::before {
  width: 100%;
}

.company-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* 选中状态 - 更明显的高亮 */
.selected-company {
  border-left: 4px solid #1890ff;
  background-color: #e6f7ff;
  padding-left: 11px;
  margin-left: -5px;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
  transform: scale(1.01);
}

/* 公司卡片样式 - 增加内边距和视觉元素 */
.company-card {
  margin: 0;
  border: none;
  box-shadow: none;
  background-color: transparent;
  padding: 18px; /* 增加内边距 */
  position: relative;
  z-index: 1;
}

.company-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.company-info {
  display: flex;
  align-items: center;
}

.company-icon {
  width: 42px; /* 增大图标尺寸 */
  height: 42px;
  background-color: #e6f7ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  color: #1890ff;
  font-size: 20px;
  transition: all 0.3s;
  /* 添加边框增强视觉效果 */
  border: 2px solid rgba(24, 144, 255, 0.1);
}

.company-item:hover .company-icon {
  background-color: #1890ff;
  color: white;
  border-color: rgba(24, 144, 255, 0.3);
  transform: scale(1.1);
}

.company-name {
  font-size: 18px; /* 增大字体 */
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.company-code {
  color: #606266; /* 调整颜色提高可读性 */
  font-size: 14px;
}

.company-status-badge {
  padding: 4px 10px; /* 增大标签尺寸 */
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  text-transform: capitalize;
  transition: all 0.3s;
  /* 添加轻微阴影增强视觉效果 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.company-status-badge.active {
  background-color: #e6fffb;
  color: #36cfc9;
  border: 1px solid #b5f5ec;
}

.company-status-badge.inactive {
  background-color: #f5f5f5;
  color: #bfbfbf;
  border: 1px solid #e6e6e6;
}

.company-status-badge.suspended {
  background-color: #fff2e8;
  color: #faad14;
  border: 1px solid #ffe7ba;
}

.company-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.company-details {
  display: flex;
  flex-direction: column;
}

.company-courier-count,
.company-created {
  color: #606266;
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.company-courier-count i,
.company-created i {
  margin-right: 6px;
  color: #909399;
}

.company-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  color: #606266;
  transition: all 0.3s;
  padding: 0 8px;
  /* 添加圆角背景增强视觉效果 */
  border-radius: 4px;
}

.action-btn:hover {
  color: #1890ff;
  transform: translateY(-1px);
  background-color: rgba(24, 144, 255, 0.08);
}

.btn-text {
  margin-left: 4px;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #888;
  background-color: #fafafa;
  border-radius: 4px;
  margin: 15px;
  transition: all 0.3s;
}

.empty-icon {
  width: 64px;
  height: 64px;
  background-color: #f0f2f5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px;
  color: #c0c4cc;
  font-size: 28px;
  transition: all 0.3s;
}

.empty-text {
  font-size: 14px;
  margin-bottom: 15px;
}

.empty-button {
  transition: all 0.3s;
}

.empty-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 主内容区域样式 - 占四分之三宽度 */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  height: 800px;
  background-color: #f9fafc;
}

/* 公司详情样式 */
.company-detail {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 0;
  margin-bottom: 20px;
  transition: all 0.3s;
  border: 1px solid #f0f2f5;
  overflow: hidden;
}

.company-detail:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* 公司头部信息 */
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f9fafc;
  border-bottom: 1px solid #f0f2f5;
  position: relative;
}

.detail-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, #1890ff 0%, #40a9ff 50%, #69b1ff 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.company-detail:hover .detail-header::after {
  transform: scaleX(1);
}

.detail-info {
  display: flex;
  align-items: center;
}

.detail-icon {
  width: 48px;
  height: 48px;
  background-color: #e6f7ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  color: #1890ff;
  font-size: 24px;
  transition: all 0.3s;
}

.detail-title {
  font-size: 22px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.detail-subtitle {
  display: flex;
  align-items: center;
}

.detail-code {
  color: #888;
  font-size: 14px;
  margin-right: 10px;
}

.detail-status-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.detail-status-badge.active {
  background-color: #e6fffb;
  color: #36cfc9;
  border: 1px solid #b5f5ec;
}

.detail-status-badge.inactive {
  background-color: #f5f5f5;
  color: #bfbfbf;
  border: 1px solid #e6e6e6;
}

.detail-status-badge.suspended {
  background-color: #fff2e8;
  color: #faad14;
  border: 1px solid #ffe7ba;
}

.detail-actions {
  display: flex;
  align-items: center;
}

.detail-action-btn {
  color: #606266;
  transition: all 0.3s;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.detail-action-btn:hover {
  color: #1890ff;
  transform: translateY(-1px);
}

/* 公司统计信息 */
.detail-stats {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  border-bottom: 1px solid #f0f2f5;
  padding: 15px 20px;
  background-color: #f9fafc;
  transition: all 0.3s;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 15px;
  border-right: 1px solid #f0f2f5;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(24, 144, 255, 0.3), transparent);
  transition: left 0.8s ease-in-out;
}

.stat-item:hover::before {
  left: 100%;
}

.stat-item:last-child {
  border-right: none;
}

.stat-item:hover {
  background-color: #f0f5ff;
  border-radius: 4px;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
  display: inline-block;
  transition: all 0.3s;
}

.stat-item:hover .stat-value {
  color: #1890ff;
  transform: scale(1.05);
}

.stat-label {
  font-size: 13px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 公司详情信息容器 */
.detail-info-container {
  padding: 20px;
  background-color: white;
  transition: all 0.3s;
}

.detail-info-header {
  margin-bottom: 15px;
  position: relative;
}

.info-header-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  padding-bottom: 8px;
  position: relative;
  display: inline-block;
}

.info-header-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 2px;
  background-color: #1890ff;
  border-radius: 2px;
  transition: width 0.3s;
}

.detail-info-container:hover .info-header-title::after {
  width: 100%;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-row {
  display: flex;
  align-items: flex-start;
  padding: 15px 15px;
  border-radius: 6px;
  transition: all 0.3s;
  background-color: #fff;
  border: 1px solid #f5f7fa;
  position: relative;
  overflow: hidden;
}

.info-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(24, 144, 255, 0.05), transparent);
  transition: left 0.8s;
}

.info-row:hover::before {
  left: 100%;
}

.info-row:hover {
  background-color: #f9fafc;
  transform: translateX(5px);
  border-color: #e6f7ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.info-label {
  width: 120px;
  color: #888;
  font-weight: 500;
  font-size: 14px;
  flex-shrink: 0;
  position: relative;
}

.info-label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1890ff;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.info-row:hover .info-label::before {
  opacity: 1;
}

.info-value {
  flex: 1;
  color: #303133;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
  transition: all 0.3s;
}

.info-row:hover .info-value {
  color: #1890ff;
  transform: translateX(3px);
}

.courier-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: all 0.3s;
  border: 1px solid #f0f2f5;
  margin-bottom: 20px;
}

.courier-section:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #303133;
}

.section-title i {
  margin-right: 8px;
  color: #1890ff;
}

.courier-count {
  color: #888;
  font-size: 14px;
  margin-left: 10px;
}

.section-actions {
  display: flex;
  align-items: center;
}

.filter-button {
  color: #606266;
  transition: all 0.3s;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.filter-button:hover {
  color: #1890ff;
}

.filter-icon {
  margin-left: 5px;
  transition: transform 0.3s;
}

.el-dropdown:hover .filter-icon {
  transform: rotate(180deg);
}

/* 快递员表格样式 */
.courier-table {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #f0f2f5;
  transition: all 0.3s;
}

.courier-table:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.el-table th {
  background-color: #f9fafc;
  color: #606266;
  font-weight: 500;
  border-bottom: 1px solid #f0f2f5;
  padding: 12px 10px;
  transition: all 0.3s;
}

.el-table td {
  border-bottom: 1px solid #f0f2f5;
  padding: 12px 10px;
  transition: all 0.3s;
}

.el-table tr:hover {
  background-color: #f9fafc;
}

.name-column {
  font-weight: 500;
}

.courier-info {
  display: flex;
  align-items: center;
}

.courier-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}


.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.avatar-image-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  transition: transform 0.3s;
}

.courier-info:hover .avatar-image {
  transform: scale(1.1);
}

.courier-name {
  color: #303133;
}

.status-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  transition: all 0.3s;
}

.status-badge.active {
  background-color: #e6fffb;
  color: #36cfc9;
  border: 1px solid #b5f5ec;
}

.status-badge.inactive {
  background-color: #f5f5f5;
  color: #bfbfbf;
  border: 1px solid #e6e6e6;
}

.status-badge.on_leave {
  background-color: #fff2e8;
  color: #faad14;
  border: 1px solid #ffe7ba;
}

.delivery-count {
  font-weight: 500;
  color: #303133;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
}

.edit-btn,
.delete-btn {
  color: #606266;
  transition: all 0.3s;
}

.edit-btn:hover {
  color: #1890ff;
  transform: translateY(-1px);
}

.delete-btn:hover {
  color: #f56c6c;
  transform: translateY(-1px);
}

/* 加载动画 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.7);
}

.el-loading-spinner .path {
  stroke: #1890ff;
}

/* 快递员查询与列表容器样式 */
.courier-section {
  display: flex;
  flex-direction: column;
}

/* 查询与列表容器 */
.courier-search-list-container {
  display: flex;
  width: 100%;
  gap: 20px;
  flex: 1;
}

/* 左侧查询表单 */
.courier-search-form {
  background-color: #f9fafc;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #f0f2f5;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 右侧表格容器 */
.courier-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 快递员表格 */
.courier-table {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #f0f2f5;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.el-table {
  width: 100%;
  flex: 1;
  display: table;
}

/* 响应式设计 - 小屏幕下垂直排列 */
@media (max-width: 1024px) {
  .courier-search-list-container {
    flex-direction: column;
  }

  .courier-search-form,
  .courier-table-container {
    width: 100%;
  }
}

/* 性别标签样式 */
.sex-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
}

.male {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #b5f5ec;
}

.female {
  background-color: #fff2f0;
  color: #f56c6c;
  border: 1px solid #ffddd5;
}

.additional-pagination-container {
  padding: 15px 0;
  background-color: #fff;
  border-radius: 8px;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  border: 1px solid #f0f2f5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.additional-pagination-container:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

</style>
